<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 0 auto;">
			IE10以下不支持
		</canvas>
	</body>
	<script>
		window.onload = function () {
			var canvas = document.getElementById('canvas');
			canvas.width = 1024;
			canvas.height =768;
			//canvas是基于状态设定的 上一个状态不销毁就会影响后一个状态 于是
			
			var context = canvas.getContext('2d');//定义绘画方式
			context.beginPath();
			context.moveTo(100,100); //绘画起点
			context.lineTo(700,700); //像素点
			context.lineTo(100,700);
			context.lineTo(100,100);
			context.lineWidth = 5; //设置宽度
			
			context.fillStyle = "rgb(2,100,30)";
			context.fill(); //负责填充部分 绘制填充
			context.strokeStyle = '#005588'; //设置颜色
			context.stroke();//绘制函数 绘制线条  上面只是两个关键帧 两者都是决定最后的绘制元素
			context.closePath();
		}
	</script>
</html>
